<template>
  <view class="goods">
    <u-swiper
      :list="goods.thumb"
      class="goods-swipe"
      height="300px"
    />
    <view class="goods-prices">
      ￥12599
      <view class="price">￥11500<span>预估到手</span></view>
    </view>

    <u-cell-group>
      <u-cell :title="goods.title"/>
      <u-cell :is-link="true">
        <template #title>
          <u-row class="goods-detail">
            <u-col class="detail" span="4" >选择规格</u-col>
            <u-col span="6">14英寸 深空灰</u-col>
          </u-row>
        </template>
      </u-cell>
      <u-cell :is-link="true">
        <template #title>
          <u-row class="goods-detail" >
            <u-col class="detail" span="4" >商品运费</u-col>
            <u-col span="6" >免运费</u-col>
          </u-row>
        </template>
      </u-cell>
      <u-cell :is-link="true">
        <template #title>
          <u-row class="goods-detail">
            <u-col class="detail" span="4" >服务保障</u-col>
            <u-col span="6" >七天无理由退货</u-col>
          </u-row>
        </template>
      </u-cell>
    </u-cell-group>
    <uni-goods-nav/>
  </view>
</template>

<script>

export default {
  data() {
    return {
      goods: {
        title: 'Apple MacBook Pro  14英寸 深空灰',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'https://m.360buyimg.com/babel/jfs/t1/97547/10/39827/56094/642fbf69F8c7c526f/fa14e0b98f06cb8e.jpg',
          'https://m.360buyimg.com/babel/jfs/t1/97547/10/39827/56094/642fbf69F8c7c526f/fa14e0b98f06cb8e.jpg'
        ]
      }
    }
  },

  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2)
    }

    // onClickCart() {
    //   this.$router.push('cart')
    // }
  }
}
</script>

  <style lang="scss" scoped>
  .goods {
    padding-bottom: 50px;

    &-swipe {
    margin-bottom: 30px;
      img {
        width: 100%;
        display: block;
      }
    }

    &-title {
      font-size: 16px;
    }

    &-detail{
      display: flex;
      text-align: left;
      .detail{
        font-weight: 600;
        color: #252631;
      }
    }

    &-price {
      color: #f44;
    }

    &-prices {
      align-items: center;
      display: flex;
      height: 52px;
      background: #1762F2;
      font-size: 24px;
      font-weight: 500;
      color: #FFFFFF;
      .price{
      margin-left: 10px;
      background: #fff;
      font-size: 16px;
      font-weight: bold;
      color: #D34D25;
      border-radius: 4px;
      display: flex;
      align-items: center;
      span{
        font-size: 12px;
        font-weight: 600;
        color: #252631;
        letter-spacing: 2px;
        padding-left: 8px;
      }
      }
    }

    &-express {
      color: #999;
      font-size: 12px;
      padding: 5px 15px;
    }

    &-cell-group {
      margin: 15px 0;

      .van-cell__value {
        color: #999;
      }
    }

    &-tag {
      margin-left: 5px;
    }
  }
  </style>
